<template>
  <div class="order-page">
    <headers></headers>
    
    <!-- 页面头部 -->
    <div class="page-header">
      <div class="header-content">
        <h1>我的预定</h1>
        <p>管理您的景点和酒店预订</p>
      </div>
    </div>

    <!-- 预定内容 -->
    <div class="content-section">
      <el-tabs v-model="activeName" type="border-card" @tab-click="handleClick">
        <!-- 景点预定 -->
        <el-tab-pane label="景点预定" name="first">
          <div class="bookings-grid">
            <div class="booking-card" v-for="(item,index) in tableData" :key="index" @click="toOrderInfo(index)">
              <div class="card-image" :style="{ backgroundImage: `url(${item.images.split(',')[0]})` }">
                <div class="status-badge" :class="getStatusClass(item.state)">
                  {{getStatusText(item.state)}}
                </div>
              </div>
              <div class="card-content">
                <h3>{{item.name}}</h3>
                <p class="description">{{item.introduce}}</p>
                <div class="booking-info">
                  <span class="info-item">
                    <i class="el-icon-date"></i>
                    {{new Date(item.time).toLocaleDateString()}}
                  </span>
                  <span class="info-item">
                    <i class="el-icon-user"></i>
                    {{item.num}}人
                  </span>
                </div>
              </div>
            </div>
          </div>
          
          <!-- 空状态 -->
          <div class="empty-state" v-if="tableData.length === 0">
            <i class="el-icon-tickets"></i>
            <p>暂无景点预定</p>
            <el-button type="primary" @click="$router.push('/attractions')">去预定景点</el-button>
          </div>

          <!-- 分页 -->
          <div class="pagination-container" v-if="tableData.length > 0">
            <el-pagination
              background
              :page-size="search.pageSize"
              layout="prev, pager, next"
              @current-change="handleCurrentChange"
              :total="total">
            </el-pagination>
          </div>
        </el-tab-pane>

        <!-- 酒店预定 -->
        <el-tab-pane label="酒店预定" name="second">
          <div class="bookings-grid">
            <div class="booking-card" v-for="(item,index) in tableData1" :key="index" @click="toOrderInfo1(index)">
              <div class="card-image" :style="{ backgroundImage: `url(${item.images.split(',')[0]})` }">
                <div class="status-badge" :class="getStatusClass(item.state)">
                  {{getStatusText(item.state)}}
                </div>
              </div>
              <div class="card-content">
                <h3>{{item.name}}</h3>
                <p class="description">{{item.introduce}}</p>
                <div class="booking-info">
                  <span class="info-item">
                    <i class="el-icon-date"></i>
                    {{new Date(item.time).toLocaleDateString()}}
                  </span>
                  <span class="info-item">
                    <i class="el-icon-user"></i>
                    {{item.num}}人
                  </span>
                </div>
              </div>
            </div>
          </div>

          <!-- 空状态 -->
          <div class="empty-state" v-if="tableData1.length === 0">
            <i class="el-icon-house"></i>
            <p>暂无酒店预定</p>
            <el-button type="primary" @click="$router.push('/hotel')">去预定酒店</el-button>
          </div>

          <!-- 分页 -->
          <div class="pagination-container" v-if="tableData1.length > 0">
            <el-pagination
              background
              :page-size="search1.pageSize"
              layout="prev, pager, next"
              @current-change="handleCurrentChange1"
              :total="total1">
            </el-pagination>
          </div>
        </el-tab-pane>
      </el-tabs>
    </div>

    <!-- 景点预定详情弹窗 -->
    <el-dialog
      title="预定详情"
      :visible.sync="dialogVisible"
      width="500px"
      custom-class="booking-dialog">
      <div class="dialog-content">
        <div class="status-section">
          <div class="status-tag" :class="getStatusClass(state)">
            {{getStatusText(state)}}
          </div>
        </div>

        <div class="info-section">
          <div class="info-group">
            <label>预定人数</label>
            <el-input-number 
              disabled 
              size="small" 
              v-model="num" 
              :min="1" 
              :max="10"
              controls-position="right">
            </el-input-number>
          </div>

          <div class="info-group">
            <label>预定日期</label>
            <el-date-picker
              disabled
              size="small"
              v-model="date1"
              type="date"
              placeholder="选择预约日期">
            </el-date-picker>
          </div>
        </div>

        <div class="visitors-section">
          <h4>游客信息</h4>
          <div class="visitor-info" v-for="(item, index) in people" :key="index">
            <el-input size="small" disabled v-model="item.name" placeholder="姓名"></el-input>
            <el-input size="small" disabled v-model="item.tel" placeholder="电话"></el-input>
            <el-input size="small" disabled v-model="item.idCard" placeholder="身份证号"></el-input>
          </div>
        </div>
      </div>

      <div slot="footer" class="dialog-footer">
        <el-button @click="close">关 闭</el-button>
        <el-button 
          type="danger" 
          v-if="state != 5 && state != 3 && state != 2 && state != 4" 
          @click="editSysAttractionOrder">
          取消预定
        </el-button>
      </div>
    </el-dialog>

    <!-- 酒店预定详情弹窗 -->
    <el-dialog
      title="预定详情"
      :visible.sync="dialogVisible1"
      width="500px"
      custom-class="booking-dialog">
      <div class="dialog-content">
        <div class="status-section">
          <div class="status-tag" :class="getStatusClass(state)">
            {{getStatusText(state)}}
          </div>
        </div>

        <div class="info-section">
          <div class="info-group">
            <label>预定房间数</label>
            <el-input-number 
              disabled 
              size="small" 
              v-model="num" 
              :min="1" 
              :max="10"
              controls-position="right">
            </el-input-number>
          </div>

          <div class="info-group">
            <label>入住日期</label>
            <el-date-picker
              disabled
              size="small"
              v-model="date1"
              type="date"
              placeholder="选择入住日期">
            </el-date-picker>
          </div>
        </div>

        <div class="visitors-section">
          <h4>入住人信息</h4>
          <div class="visitor-info">
            <el-input size="small" disabled v-model="people1.name" placeholder="姓名"></el-input>
            <el-input size="small" disabled v-model="people1.tel" placeholder="电话"></el-input>
            <el-input size="small" disabled v-model="people1.idCard" placeholder="身份证号"></el-input>
          </div>
        </div>
      </div>

      <div slot="footer" class="dialog-footer">
        <el-button @click="close1">关 闭</el-button>
        <el-button 
          type="danger" 
          v-if="state != 5 && state != 3 && state != 2 && state != 4" 
          @click="editSysHotelOrder">
          取消预定
        </el-button>
      </div>
    </el-dialog>

    <bottoms></bottoms>
  </div>
</template>

<script>
import { getSysHotelOrderPage, getSysAttractionOrderPage, editSysAttractionOrder, editSysHotelOrder } from '../../api/api'
import headers from '@/components/header'
import bottoms from '@/components/bottom'

export default {
  name: 'OrderPage',
  components: {
    headers,
    bottoms
  },
  data() {
    return {
      search: {
        userId: "",
        pageSize: 12,
        pageNumber: 1,
        orderBy: 'create_time desc'
      },
      search1: {
        userId: "",
        pageSize: 12,
        pageNumber: 1,
      },
      total: 100,
      tableData: [],
      total1: 100,
      tableData1: [],
      activeName: "first",
      id: "",
      state: "",
      num: "",
      date1: "",
      people: [],
      people1: {},
      dialogVisible: false,
      dialogVisible1: false
    }
  },
  methods: {
    getStatusText(state) {
      const statusMap = {
        0: '未确认',
        1: '已确认',
        2: '取消中',
        3: '已取消',
        4: '取消失败',
        5: '已使用'
      }
      return statusMap[state] || '未知状态'
    },
    getStatusClass(state) {
      const classMap = {
        0: 'status-pending',
        1: 'status-confirmed',
        2: 'status-cancelling',
        3: 'status-cancelled',
        4: 'status-failed',
        5: 'status-used'
      }
      return classMap[state] || 'status-unknown'
    },
    editSysAttractionOrder() {
      const param = {
        id: this.id,
        state: 2,
      }
      editSysAttractionOrder(param).then(res => {
        if(res.code == 1000) {
          this.$message({
            message: '取消申请成功,请等待审核通过',
            type: 'success'
          });
          this.close()
          this.getSysAttractionOrderPage()
        }
      })
    },
    editSysHotelOrder() {
      const param = {
        id: this.id,
        state: 2,
      }
      editSysHotelOrder(param).then(res => {
        if(res.code == 1000) {
          this.$message({
            message: '取消申请成功,请等待审核通过',
            type: 'success'
          });
          this.close1()
          this.getSysHotelOrderPage()
        }
      })
    },
    toOrderInfo(index) {
      const data = this.tableData[index]
      this.id = data.id
      this.people = JSON.parse(data.people)
      this.num = data.num
      this.date1 = data.time
      this.state = data.state
      this.dialogVisible = true
    },
    toOrderInfo1(index) {
      const data = this.tableData1[index]
      this.id = data.id
      this.people1 = JSON.parse(data.people)
      this.num = data.num
      this.date1 = data.time
      this.state = data.state
      this.dialogVisible1 = true
    },
    close() {
      this.dialogVisible = false
    },
    close1() {
      this.dialogVisible1 = false
    },
    handleClick() {
      if(this.activeName == "first") {
        this.getSysAttractionOrderPage()
      } else {
        this.getSysHotelOrderPage()
      }
    },
    getSysAttractionOrderPage() {
      this.search.orderBy = 'create_time desc'
      getSysAttractionOrderPage(this.search).then(res => {
        if (res.code == 1000) {
          this.tableData = res.data.records
          this.total = res.data.total
        }
      })
    },
    getSysHotelOrderPage() {
      getSysHotelOrderPage(this.search1).then(res => {
        if (res.code == 1000) {
          this.tableData1 = res.data.records
          this.total1 = res.data.total
        }
      })
    },
    handleCurrentChange(val) {
      this.search.pageNumber = val
      this.getSysAttractionOrderPage()
    },
    handleCurrentChange1(val) {
      this.search1.pageNumber = val
      this.getSysHotelOrderPage()
    }
  },
  mounted() {
    this.search.userId = JSON.parse(window.localStorage.getItem("user_info")).id
    this.search1.userId = this.search.userId
    this.getSysAttractionOrderPage()
  }
}
</script>

<style scoped>
.order-page {
  min-height: 100vh;
  background-color: #f8f9fa;
}

/* 页面头部样式 */
.page-header {
  background: linear-gradient(135deg, #3F51B5 0%, #303F9F 100%);
  background-size: cover;
  background-position: center;
  height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  text-align: center;
  margin-bottom: 40px;
}

.header-content {
  max-width: 800px;
  padding: 0 20px;
}

.header-content h1 {
  font-size: 2.5rem;
  margin-bottom: 1rem;
  font-weight: bold;
  text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
}

.header-content p {
  font-size: 1.2rem;
  margin-bottom: 2rem;
  text-shadow: 1px 1px 2px rgba(0,0,0,0.3);
}

/* 内容区域样式 */
.content-section {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0;
}

/* 标签页样式 */
.el-tabs {
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0,0,0,0.1);
  margin: 0 20px;
}

.el-tabs__nav-wrap {
  padding: 0 20px;
}

/* 预定网格 */
.bookings-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  grid-auto-flow: dense;
  gap: 30px;
  padding: 20px;
  justify-content: start; /* 整体靠左对齐 */
  justify-items: stretch; /* 确保每个卡片填充其网格空间 */
}

.booking-card {
  background: white;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 6px rgba(0,0,0,0.1);
  transition: transform 0.3s ease;
  cursor: pointer;
}

.booking-card:hover {
  transform: translateY(-5px);
}

.card-image {
  height: 200px;
  background-size: cover;
  background-position: center;
  position: relative;
}

.status-badge {
  position: absolute;
  top: 12px;
  right: 12px;
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 0.9rem;
  font-weight: 500;
  color: white;
}

/* 状态样式 */
.status-pending {
  background-color: #e6a23c;
}

.status-confirmed {
  background-color: #67c23a;
}

.status-cancelling {
  background-color: #909399;
}

.status-cancelled {
  background-color: #f56c6c;
}

.status-failed {
  background-color: #f56c6c;
}

.status-used {
  background-color: #409EFF;
}

.card-content {
  padding: 20px;
}

.card-content h3 {
  font-size: 1.25rem;
  color: #303133;
  margin-bottom: 10px;
  font-weight: 500;
}

.description {
  color: #606266;
  font-size: 0.9rem;
  line-height: 1.6;
  margin-bottom: 15px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.booking-info {
  display: flex;
  gap: 15px;
}

.info-item {
  display: flex;
  align-items: center;
  gap: 5px;
  color: #909399;
  font-size: 0.9rem;
}

/* 空状态样式 */
.empty-state {
  text-align: center;
  padding: 60px 20px;
  color: #909399;
}

.empty-state i {
  font-size: 48px;
  margin-bottom: 16px;
}

.empty-state p {
  font-size: 16px;
  margin-bottom: 24px;
}

/* 分页容器样式 */
.pagination-container {
  display: flex;
  justify-content: center;
  margin: 20px 0;
}

/* 弹窗样式 */
.booking-dialog {
  border-radius: 8px;
}

.dialog-content {
  padding: 20px 0;
}

.status-section {
  margin-bottom: 24px;
  text-align: center;
}

.status-tag {
  display: inline-block;
  padding: 6px 16px;
  border-radius: 20px;
  color: white;
  font-weight: 500;
}

.info-section {
  margin-bottom: 24px;
}

.info-group {
  display: flex;
  align-items: center;
  margin-bottom: 16px;
}

.info-group label {
  width: 80px;
  color: #606266;
}

.visitors-section {
  background: #f8f9fa;
  padding: 20px;
  border-radius: 8px;
}

.visitors-section h4 {
  margin: 0 0 16px;
  color: #303133;
}

.visitor-info {
  display: grid;
  grid-template-columns: 1fr 1fr 1.5fr;
  gap: 10px;
  margin-bottom: 12px;
}

.visitor-info:last-child {
  margin-bottom: 0;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .page-header {
    height: 160px;
  }

  .header-content h1 {
    font-size: 2rem;
  }

  .header-content p {
    font-size: 1rem;
  }

  .bookings-grid {
    grid-template-columns: 1fr;
  }

  .visitor-info {
    grid-template-columns: 1fr;
  }

  .booking-dialog {
    width: 90% !important;
  }
}
</style>